<template>
  <div>
    <div v-for="(item, index) in imgDetails" :key="index">
      <!-- 图片详情头部 -->
      <div class="detailHead">
        <h3 v-html="item.title"></h3>
        <span class="addTime">发表时间：{{item.add_time.split('T')[0]}}</span>
        <span class="clicked">点击：{{item.click}}</span>
      </div>
      <!-- 缩略图 -->
      <div class="imgBox">
        <div v-for="(subItem, index1) in thumbImgList" :key="index1">
          <img :src="subItem.src" @click="preview(index1)">
        </div>
      </div>
      <!-- 图片详细描述 -->
      <div class="desc" v-html="item.content"></div>
    </div>
  </div>
</template>

<script>
import { ImagePreview } from 'vant'
export default {
  name: 'Info',
  data () {
    return {
      // 从路由中获取参数
      imgID: this.$route.params.id,
      // 图片详情
      imgDetails: [],
      // 缩略图列表
      thumbImgList: [],
      // 预览列表
      previewList: []
    }
  },
  created () {
    this.getImgInfo()
    this.getThumbImg()
  },
  methods: {
    // 获取图片详情
    async getImgInfo () {
      const { data: res } = await this.$http.get(`api/getimageInfo/${this.imgID}`)
      this.imgDetails = res.message
    },

    // 获取缩略图列表
    async getThumbImg () {
      const { data: res } = await this.$http.get(`api/getthumimages/${this.imgID}`)
      this.thumbImgList = res.message
      for (var i = 0; i < this.thumbImgList.length; i++) {
        this.previewList.push(this.thumbImgList[i].src)
      }
    },

    // 预览图片
    preview (index1) {
      ImagePreview({
        images: this.previewList,
        startPosition: index1
      })
    }
  }
}
</script>

<style lang="less" scoped>
.detailHead {
  margin: 0 10px;
  color: #8f8f94;
  overflow: hidden;
  border-bottom: 1px solid #8f8f94;
  h3 {
    font-size: 15px;
    color: #26a2ff;
    text-align: center;
  }
  .addTime {
    float: left;
    padding-left: 20px;
    padding-bottom: 8px;
  }
  .clicked {
    float: right;
    padding-right: 20px;
    padding-bottom: 8px;
  }
}
.imgBox {
  margin: 20px 0;
  padding: 0 10px;
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
  div {
    width: 30%;
    margin: 5px;
    box-shadow: 0 0 5px 3px rgba(0, 0, 0, .4);
    img {
      width: 100%;
    }
  }
}
.desc {
  padding: 0 18px;
  text-align: left;
}
</style>
